/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  Text,
  useTheme,
  Container,
  Button,
  IconArrowRight,
  Input,
  Select,
  CheckSwitch,
  LineColumn,
  SuffixInput, InputLine,ComboBoxDatalist, InputDatalist,
  CommitInput
} from "customize-easy-ui-component";
//import { DialogEnterReturn } from "../../context/DialogEnterReturn";
//import queryString from "querystring";
import {useCommnBaseParm, CommnBase} from "./CommnBase";
import {useRef} from "react";
import HashLinkObserver from "react-hash-link";

import queryString from "query-string";
export const 缓冲器形式=["液压","聚氨酯","弹簧","蓄能型","耗能型","聚胺脂","弹簧 液压","聚氨酯 液压","弹簧+聚氨酯","非线性蓄能型","线性蓄能型"];
export const 加装附加装置=["IC卡", "自动平层装置","IC卡和自动平层装置","能量反馈装置","自动平层和能量反馈装置","IC卡和能量反馈装置"];
export const 开门方式=["中分门","旁开门","中分双折","旁开双折","中分","旁开","侧开","自动", "中开","手动门","水平中分滑动门（二扇）", "左折", "左开","右折","旁开三折"];
export const 控制方式=["集选","并联","群控","按钮","信号","按钮控制","微机控制","PLC","微机","微电脑","按扭","信号控制","交流变频"]
export const 事故隐患类别=['一般','严重','重大','特大','特别重大'];
//export const 施工类别s=["安装","新装", "锅炉安装","新炉安装", "移装","改造", "旧炉移装", "新装验收","新安装","锅炉改造"]
export const 补偿方式s=['补偿链','补偿绳','补偿缆'];
export const 电动机类型s=["交流","YFD160M-6","YFD160L1-6"];
export const 顶升形式s=["间接顶升","非直顶式", "直顶式","侧顶式","曳引式","间接式","侧置式"];
export const 对重导轨型式s=["T型导轨","空心导轨","热轧型钢导轨"];
export const 轿厢装修状态=["无预留装修，轿厢无装修；轿顶未装空调","无预留装修，轿厢已装修；轿顶未装空调","无预留装修，轿厢无装修；轿顶装有空调","无预留装修，轿厢已装修；轿顶装有空调","有预留装修200kg，轿厢未装修；轿顶未装空调"];
export const 区域防爆等级=["2区","ⅡB", "ⅡBT4", "ⅡB级","Ⅱ级","1区"];
export const 驱动方式s=["曳引式","VVVF","曳引驱动","强制式","链条驱动","KDL16","交流"];
export const 上行保护装置形式=["制动器","夹绳器","曳引轮制动器","钢丝绳制动器","双向安全钳","安全钳","轮式附加制动器"];
export const 拖动方式=['交流单速','交流双速','变极调速','交流调压调速','交流变频','直流晶闸管直接','柱塞直顶','柱塞侧置',"交流变频变压","VVVF","直流"];
export const 油缸形式s=["浸油式", "非浸油式","油浸式","双节式（侧置）"];



interface 电梯props {
  id?: string;
  readOnly?: boolean;
  editable?: boolean;
  //当前设备数据(确认修改之后)
  eqp?:any;
  //去修改设备数据
  //setEqp:  React.Dispatch<React.SetStateAction<any>>;
  //graphQL的变更执行回调函数 (...args: any[]) => any
  mutationFunc: (...args: any[]) => any;
}
//可嵌套的编辑器；传递保存变动数据。 中文可用，但是引用时刻会告警徐改成英文<As...>
//特种电梯；IF_SPEC_EQP 合并字段=旧平台的:是否特殊设备;
/** 电梯编辑器
 *把修改发送按钮从上层组件挪到了下一级组件中就能直接简单方式汇集到各个编辑字段的最新数据。graphQL的变更执行函数mutationFunc上层组件提供。
 * */
export const 电梯: React.FunctionComponent<电梯props> = (
    {
       readOnly,
       id,
       editable,
       eqp=null,    //【只读的】:从好几代祖先前的DetailedGuide在graphQL获得后端服务器数据层层传递下来的。
       //setEqp,   //传递编辑保存回调用
      mutationFunc,
     }) =>
{
  //const qs= queryString.parse(window.location.search);
  const theme = useTheme();
  const {save, field, reurl}= window.history.state?.state??{};      //通用伪对话框传递格式
  const edt = save?  save : eqp;

  const [spec, setSpec] = React.useState(edt.spec);
  const [vl, setVl] = React.useState(edt.vl);
  const [flo, setFlo] = React.useState(edt.flo);
  const [nnor, setNnor] = React.useState(edt.nnor);
  const [cpm, setCpm] = React.useState(edt.cpm);
  const [hlf, setHlf] = React.useState(edt.hlf);
  const [oldb, setOldb] = React.useState(edt.oldb);
  const [lesc, setLesc] = React.useState(edt.lesc);
  const [wesc, setWesc] = React.useState(edt.wesc);
  const [tm, setTm] = React.useState(edt.tm);
  const [mtm, setMtm] = React.useState(edt.mtm);
  const [buff, setBuff] = React.useState(edt.buff);
  const [rtl, setRtl] = React.useState(edt.rtl);
  const [aap, setAap] = React.useState(edt.aap);
  const [prot, setProt] = React.useState(edt.prot);
  const [doop, setDoop] = React.useState(edt.doop);
  const [limm, setLimm] = React.useState(edt.limm);
  const [opm, setOpm] = React.useState(edt.opm);
  const [lbkd, setLbkd] = React.useState(edt.lbkd);
  const [nbkd, setNbkd] = React.useState(edt.nbkd);

  const  svp = edt?.svp;
  //const  svp = JSON.parse(edt?.svp || '{}');
  const [屏号, set屏号] = React.useState(svp?.屏号);
  const [曳引号, set曳引号] = React.useState(svp?.曳引号);
  const [主机号, set主机号] = React.useState(svp?.主机号);
  const [电动机类, set电动机类] = React.useState(svp?.电动机类);
  const [额定载人, set额定载人] = React.useState(svp?.额定载人);
  const [对重块数, set对重块数] = React.useState(svp?.对重块数);
  const [拖动, set拖动] = React.useState(svp?.拖动);
  const [绳数, set绳数] = React.useState(svp?.绳数);
  const [是钢带, set是钢带] = React.useState(svp?.是钢带);
  const [钢带规格, set钢带规格] = React.useState(svp?.钢带规格);
  const [绳直径, set绳直径] = React.useState(svp?.绳直径);
  const [倾斜角度, set倾斜角度] = React.useState(svp?.倾斜角度);
  const [电机功率, set电机功率] = React.useState(svp?.电机功率);
  const [电机转速, set电机转速] = React.useState(svp?.电机转速);
  const [电梯门数, set电梯门数] = React.useState(svp?.电梯门数);
  const [电梯站数, set电梯站数] = React.useState(svp?.电梯站数);
  const [顶层高度, set顶层高度] = React.useState(svp?.顶层高度);
  const [顶升形式, set顶升形式] = React.useState(svp?.顶升形式);
  const [导轨型式, set导轨型式] = React.useState(svp?.导轨型式);
  const [对重轨距, set对重轨距] = React.useState(svp?.对重轨距);
  const [轿厢高, set轿厢高] = React.useState(svp?.轿厢高);
  const [轿厢宽, set轿厢宽] = React.useState(svp?.轿厢宽);
  const [轿厢深, set轿厢深] = React.useState(svp?.轿厢深);
  const [轿厢轨距, set轿厢轨距] = React.useState(svp?.轿厢轨距);
  const [驱动方式, set驱动方式] = React.useState(svp?.驱动方式);
  const [船梯, set船梯] = React.useState(svp?.船梯);
  const [公共交通, set公共交通] = React.useState(svp?.公共交通);
  const [汽车电梯, set汽车电梯] = React.useState(svp?.汽车电梯);
  const [区域防爆, set区域防爆] = React.useState(svp?.区域防爆);
  const [上护装置, set上护装置] = React.useState(svp?.上护装置);
  const [速比, set速比] = React.useState(svp?.速比);
  const [曳引比, set曳引比] = React.useState(svp?.曳引比);
  const [轮节径, set轮节径] = React.useState(svp?.轮节径);
  const [梯级宽度, set梯级宽度] = React.useState(svp?.梯级宽度);
  const [悬挂绳数, set悬挂绳数] = React.useState(svp?.悬挂绳数);
  const [悬挂绳径, set悬挂绳径] = React.useState(svp?.悬挂绳径);
  const [防爆标志, set防爆标志] = React.useState(svp?.防爆标志);
  const [泵功率, set泵功率] = React.useState(svp?.泵功率);
  const [油缸数, set油缸数] = React.useState(svp?.油缸数);
  const [油缸形式, set油缸形式] = React.useState(svp?.油缸形式);
  const [上护型号, set上护型号] = React.useState(svp?.上护型号);

  //const  pa =JSON.parse( edt?.pa || '{}');
  const  pa = edt?.pa;
  const [钳型号, set钳型号] = React.useState(pa?.钳型号);
  const [钳编号, set钳编号] = React.useState(pa?.钳编号);
  const [爆炸物质, set爆炸物质] = React.useState(pa?.爆炸物质);
  const [补偿方式, set补偿方式] = React.useState(pa?.补偿方式);
  const [层门型号, set层门型号] = React.useState(pa?.层门型号);
  const [底坑深度, set底坑深度] = React.useState(pa?.底坑深度);
  const [对限速型, set对限速型] = React.useState(pa?.对限速型);
  const [对限速号, set对限速号] = React.useState(pa?.对限速号);
  const [额定电流, set额定电流] = React.useState(pa?.额定电流);
  const [缓编号, set缓编号] = React.useState(pa?.缓编号);
  const [缓型号, set缓型号] = React.useState(pa?.缓型号);
  const [缓厂家, set缓厂家] = React.useState(pa?.缓厂家);
  const [上限电速, set上限电速] = React.useState(pa?.上限电速);
  const [上限机速, set上限机速] = React.useState(pa?.上限机速);
  const [下限电速, set下限电速] = React.useState(pa?.下限电速);
  const [下限机速, set下限机速] = React.useState(pa?.下限机速);
  const [移护号, set移护号] = React.useState(pa?.移护号);
  const [移护型, set移护型] = React.useState(pa?.移护型);
  const [装修, set装修] = React.useState(pa?.装修);
  const [锁型号, set锁型号] = React.useState(pa?.锁型号);
  const [上护编号, set上护编号] = React.useState(pa?.上护编号);
  const [上行额速, set上行额速] = React.useState(pa?.上行额速);
  const [手机信, set手机信] = React.useState(pa?.手机信);
  const [限速器号, set限速器号] = React.useState(pa?.限速器号);
  const [限绳直径, set限绳直径] = React.useState(pa?.限绳直径);
  const [下额定速, set下额定速] = React.useState(pa?.下额定速);
  const [限机械速, set限机械速] = React.useState(pa?.限机械速);
  const [泵编号, set泵编号] = React.useState(pa?.泵编号);
  const [泵流量, set泵流量] = React.useState(pa?.泵流量);
  const [泵型号, set泵型号] = React.useState(pa?.泵型号);
  const [泵转速, set泵转速] = React.useState(pa?.泵转速);
  const [液油型号, set液油型号] = React.useState(pa?.液油型号);
  const [防爆证号, set防爆证号] = React.useState(pa?.防爆证号);

  //肢解可复用的共同组件模式： Hook + 配套的组件。
  const cbp =useCommnBaseParm(eqp, svp, pa, save);
  //const cbp =useCommnBaseParm(edt, svp, pa, qs, save);
  //前端svp/pa: JSON转换：Float也直接转为"123.4"字符串, 后端JSON.parseObject可直接转换Float;
  //confirmation原本就是直接打包给后端的输入，所以svp和pa两个也是转为json字符串存储了。
  async function confirmation() {
    //前面垫底加了newdat={ ...eqp,  .；就意味着从graphQL后端得到的其它没有在这编辑状态变量列举出的隐含字段也可能有的，还能继续保存回传给后端服务器的。
    const newdat={ ...eqp,  ...cbp.out,
      flo,spec,vl,nnor,cpm,hlf,oldb,lesc,wesc,tm,mtm,buff,rtl,
      aap,prot,doop,limm,opm,lbkd,nbkd,
      svp: { ...cbp.svpO,
          主机号,屏号,倾斜角度,电机功率,电机转速,电梯门数,电梯站数,顶层高度,顶升形式,
        对重块数,对重轨距,导轨型式,曳引号,电动机类,额定载人,轿厢高,轿厢宽,轿厢深,轿厢轨距,
        拖动,绳数, 是钢带,钢带规格:是钢带?钢带规格:undefined, 绳直径:是钢带?undefined:绳直径,
        驱动方式,船梯,公共交通,汽车电梯,区域防爆,上护装置,速比,曳引比,轮节径,梯级宽度,
        悬挂绳数,悬挂绳径,泵功率,油缸数,油缸形式,防爆标志,上护型号,
        }
      ,
      pa: { ...cbp.paO,
        钳型号,钳编号,爆炸物质,补偿方式,层门型号,底坑深度,对限速型,对限速号,额定电流,
        缓编号,缓型号,缓厂家,上限电速,上限机速,下限电速,下限机速,移护号,移护型,装修,
        锁型号,上护编号,上行额速,手机信,限速器号,限绳直径,下额定速,限机械速,
        泵编号,泵流量,泵型号,泵转速,液油型号,防爆证号
        }
    };
    //await setEqp( newdat ); 没有必要回流上一级父辈组件去了。
    return newdat;
  }
  //console.log("ChooseUnit跑来8history=",history, "location==",history.location);
/* const mountedRef = useRef(false);
  if(!mountedRef.current) {
    console.log("电梯Z组件当前id=",id,"未初始化￥=",mountedRef.current);
    mountedRef.current = true;
  }
  else   console.log("电梯Z组件当前id=",id,"已经初始化了=",mountedRef.current);*/

  console.log("电梯组件传递x参数来svp Nowneqp=",eqp, "save=",save, cbp);


  return (
    <div
      css={{
        [theme.mediaQueries.md]: {
          height: "auto",
          display: "block"
        }
      }}
    >
      <hr/>
      <Text
        css={{
          flex: 1,
          textAlign: "center",
          [theme.mediaQueries.md]: {
            textAlign: "left"
          }
        }}
        wrap={false}
        variant="h5"
        gutter={false}
      >
        {eqp.cod} 电梯技术参数
      </Text>

      <div
        css={{
          flex: 1,
          [theme.mediaQueries.md]: {
            flex: "none"
          }
        }}
      >
        <div>
          <Container>
            <div
              css={{
                paddingTop: theme.spaces.lg,
                paddingBottom: theme.spaces.lg
              }}
            >

            <CommnBase cbp={cbp} id={id!}  confirmation={confirmation}/>
            <Text variant="h5">电梯参数</Text>
            <LineColumn >
              <HashLinkObserver />
              <InputLine label={`电梯层数:`}>
                <SuffixInput id="flo" type="number"  min={1} max={999}
                    value={ flo || '' }  onSave={txt=> setFlo(txt||undefined)}
                >层</SuffixInput>
              </InputLine>
              <InputLine label={'(是否特殊设备)特种电梯？'}>
                <CheckSwitch
                    checked= {spec || false}
                    onChange={e => setSpec(!spec) }
                />
              </InputLine>
              <InputLine label={ '运行速度'}>
                <SuffixInput  type="number"  min={0} max={300}
                    value={vl || ''} onSave={txt=> setVl( txt||undefined)}
                >m/s</SuffixInput>
              </InputLine>
              <InputLine label={`是否非标电梯:`}>
                <CheckSwitch
                    checked= {nnor || false}
                    onChange={e => setNnor(!nnor) }
                />
              </InputLine>
              <InputLine label={`是否属于旧楼加装电梯:`}>
                <CheckSwitch
                    checked= {oldb || false}
                    onChange={e => setOldb(!oldb) }
                />
              </InputLine>
              <InputLine label={`控制屏型号:`}>
                <CommitInput  value={ cpm || ''}  onSave={txt => setCpm(txt||undefined) } />
              </InputLine>
              <InputLine label={`提升高度:`}>
                <SuffixInput id="hlf"  type="number"
                    value={ hlf || ''} onSave={txt=> setHlf(txt||undefined)}
                >米</SuffixInput>
              </InputLine>
              <InputLine label={`人行道使用区段长度:`}>
                <SuffixInput id="lesc"  type="number"
                    value={ lesc || ''} onSave={txt=> setLesc(txt||undefined)}
                >米</SuffixInput>
              </InputLine>
              <InputLine label={`名义宽度(自动扶梯/自动人行道):`}>
                <SuffixInput type="number"
                    value={ wesc || ''} onSave={txt=> setWesc(txt||undefined)}
                >mm</SuffixInput>
              </InputLine>
              <InputLine label={`曳引机型号:`}>
                <CommitInput  value={ tm || ''}  onSave={txt=> setTm(txt||undefined)}/>
              </InputLine>
              <InputLine label={`电动机(驱动主机)型号:`}>
                <CommitInput  value={ mtm || ''}  onSave={txt=> setMtm(txt||undefined)}/>
              </InputLine>
              <InputLine label={`缓冲器形式:`}>
                <Select inputSize="md"
                        value={ buff || ''}
                        onChange={e => setBuff( e.currentTarget.value||undefined ) }
                >
                  <option></option>
                  { 缓冲器形式.map((one,i) => (
                      <option key={i}>{one}</option>
                  )) }
                </Select>
              </InputLine>
              <InputLine label={`额定载荷:`}>
                <SuffixInput type="number"
                    value={ rtl || ''} onSave={txt=> setRtl(txt||undefined)}
                >kg</SuffixInput>
              </InputLine>
              <InputLine label={`加装的附加装置:`}>
                <ComboBoxDatalist
                    value={ aap || ''}
                    onListChange={v => setAap( v||undefined ) }
                    datalist={加装附加装置}
                />
              </InputLine>
              <InputLine label={`轿厢意外移动保护装置型号:`}>
                <CommitInput  value={ prot || ''}  onSave={txt=> setProt(txt||undefined)}/>
              </InputLine>

              <InputLine label={`开门方式:`}>
                <InputDatalist
                    value={ doop || ''}
                    onListChange={v => setDoop(v ||undefined)}
                    datalist={开门方式}
                />
              </InputLine>

              <InputLine label={`限速器型号:`}>
                <CommitInput  value={ limm || ''}  onSave={txt=> setLimm(txt||undefined)}/>
              </InputLine>
              <InputLine label={`控制方式:`}>
                <Select inputSize="md"
                        value={ opm || ''}
                        onChange={e => setOpm( e.currentTarget.value||undefined ) }
                >
                  <option> </option>
                  { 控制方式.map((one,i) => (
                      <option key={i}>{one}</option>
                  )) }
                </Select>
              </InputLine>
              <InputLine  label='最后一次制动实验时间:' >
                <CommitInput type='date' value={ lbkd || ''}  onSave={txt=> setLbkd(txt||undefined)}/>
              </InputLine>
              <InputLine  label='下次制动实验时间:' >
                <Input type='date'  value={nbkd ||''}
                       onChange={e => setNbkd( e.currentTarget.value||undefined ) } />
              </InputLine>
              <InputLine label={`控制屏出厂编号:`}>
                <CommitInput  value={ 屏号 || ''}  onSave={txt=> set屏号(txt||undefined)}/>
              </InputLine>
              <InputLine label={`曳引机出厂编号:`}>
                <CommitInput  value={ 曳引号 || ''}  onSave={txt=> set曳引号(txt||undefined)}/>
              </InputLine>
              <InputLine label={`电动机(驱动主机)编号:`}>
                <CommitInput  value={ 主机号 || ''}  onSave={txt=> set主机号(txt||undefined)}/>
              </InputLine>
            </LineColumn>

              <Text variant="h5">常用参数</Text>
              <LineColumn >
                <InputLine label={`倾斜角度(自动扶梯/自动人行道)：`}>
                  <SuffixInput  type="number"
                      value={ 倾斜角度 || ''} onSave={txt=> set倾斜角度(txt||undefined)}
                  >度</SuffixInput>
                </InputLine>
                <InputLine label={`安全钳型号:`}>
                  <CommitInput  value={ 钳型号 || ''}  onSave={txt=> set钳型号(txt||undefined)}/>
                </InputLine>
                <InputLine label={`安全钳编号:`}>
                  <CommitInput  value={ 钳编号 || ''}  onSave={txt=> set钳编号(txt||undefined)}/>
                </InputLine>
                <InputLine label={`层门型号:`}>
                  <CommitInput  value={ 层门型号 || ''}  onSave={txt=> set层门型号(txt||undefined)}/>
                </InputLine>
                <InputLine label={`底坑深度:`}>
                  <SuffixInput type="number" value={ 底坑深度 || ''}
                               onSave={txt=> set底坑深度(txt||undefined)}
                  >m</SuffixInput>
                </InputLine>
                <InputLine label={`电动机功率:`}>
                  <SuffixInput type="number" value={ 电机功率 || ''}
                        onSave={txt=> set电机功率(txt||undefined)}
                  >kw</SuffixInput>
                </InputLine>
                <InputLine label={`电动机转速:`}>
                  <CommitInput  value={ 电机转速 || ''}  onSave={txt=> set电机转速(txt||undefined)}/>
                </InputLine>
                <InputLine label={`电梯门数:`}>
                  <SuffixInput type="number" value={ 电梯门数 || ''}
                       onSave={txt=> set电梯门数(txt||undefined)}
                  >个</SuffixInput>
                </InputLine>
                <InputLine label={`电梯站数:`}>
                  <SuffixInput type="number" value={ 电梯站数 || ''}
                     onSave={txt=> set电梯站数(txt||undefined)}
                  >个</SuffixInput>
                </InputLine>
                <InputLine label={`顶层高度:`}>
                  <SuffixInput type="number" value={ 顶层高度 || ''}
                     onSave={txt=> set顶层高度(txt||undefined)}
                  >m</SuffixInput>
                </InputLine>
                <InputLine label={`对重轨距:`}>
                  <SuffixInput type="number" value={ 对重轨距 || ''}
                      onSave={txt=> set对重轨距(txt||undefined)}
                  >mm</SuffixInput>
                </InputLine>
                <InputLine label={`对重块数量:`}>
                  <SuffixInput  value={ 对重块数 || ''}
                      onSave={txt=> set对重块数(txt||undefined)}
                  >块</SuffixInput>
                </InputLine>
                <InputLine label={`对重限速器编号:`}>
                  <CommitInput  value={ 对限速号 || ''}  onSave={txt=> set对限速号(txt||undefined)}/>
                </InputLine>
                <InputLine label={`对重限速器型号:`}>
                  <CommitInput  value={ 对限速型 || ''}  onSave={txt=> set对限速型(txt||undefined)}/>
                </InputLine>
                <InputLine label={`额定电流:`}>
                  <SuffixInput  value={ 额定电流 || ''}
                      onSave={txt=> set额定电流(txt||undefined)}
                  >A</SuffixInput>
                </InputLine>
                <InputLine label={`额定载人数:`}>
                  <SuffixInput  value={ 额定载人 || ''}
                     onSave={txt=> set额定载人(txt||undefined)}
                  >kg</SuffixInput>
                </InputLine>
                <InputLine label={`缓冲器编号:`}>
                  <CommitInput  value={ 缓编号 || ''}  onSave={txt=> set缓编号(txt||undefined)}/>
                </InputLine>
                <InputLine label={`缓冲器型号:`}>
                  <CommitInput  value={ 缓型号 || ''}  onSave={txt=> set缓型号(txt||undefined)}/>
                </InputLine>
                <InputLine label={`缓冲器制造单位:`}>
                  <CommitInput  value={ 缓厂家 || ''}  onSave={txt=> set缓厂家(txt||undefined)}/>
                </InputLine>
                <InputLine label={`轿厢轨距:`}>
                  <SuffixInput  value={ 轿厢轨距 || ''}
                      onSave={txt=> set轿厢轨距(txt||undefined)}
                  >mm</SuffixInput>
                </InputLine>
                <InputLine label={`轿厢上行限速器电气动作速度:`}>
                  <SuffixInput  value={ 上限电速 || ''}
                     onSave={txt=> set上限电速(txt||undefined)}
                  >m/s</SuffixInput>
                </InputLine>
                <InputLine label={`轿厢上行限速器机械动作速度:`}>
                  <SuffixInput  value={ 上限机速 || ''}
                       onSave={txt=> set上限机速(txt||undefined)}
                  >m/s</SuffixInput>
                </InputLine>
                <InputLine label={`轿厢下行限速器电气动作速度:`}>
                  <SuffixInput  value={ 下限电速 || ''}
                      onSave={txt=> set下限电速(txt||undefined)}
                  >m/s</SuffixInput>
                </InputLine>
                <InputLine label={`轿厢下行限速器机械动作速度:`}>
                  <SuffixInput  value={ 下限机速 || ''}
                      onSave={txt=> set下限机速(txt||undefined)}
                  >m/s</SuffixInput>
                </InputLine>
                <InputLine label={`轿厢意外移动保护装置编号:`}>
                  <CommitInput  value={ 移护号 || ''}  onSave={txt=> set移护号(txt||undefined)}/>
                </InputLine>
                <InputLine label={`轿厢意外移动保护装置型号:`}>
                  <CommitInput  value={ 移护型 || ''}  onSave={txt=> set移护型(txt||undefined)}/>
                </InputLine>
                <InputLine label={`轿厢装修状态:`}>
                  <InputDatalist  value={ 装修 || ''}
                                  onListChange={v => set装修(v ||undefined)}
                                  datalist={轿厢装修状态} />
                </InputLine>
                <InputLine label={`门锁型号(液压电梯):`}>
                  <CommitInput  value={ 锁型号 || ''}  onSave={txt=> set锁型号(txt||undefined)}/>
                </InputLine>
                <InputLine label={`上行保护装置形式:`}>
                  <ComboBoxDatalist  value={ 上护装置 || ''}
                                     onListChange={v => set上护装置( v||undefined ) }
                                     datalist={上行保护装置形式}  />
                </InputLine>
                <InputLine label={`上行保护装置型号:`}>
                  <CommitInput  value={ 上护型号 || ''}  onSave={txt=> set上护型号(txt||undefined)}/>
                </InputLine>
                <InputLine label={`上行超速保护装置编号:`}>
                  <CommitInput  value={ 上护编号 || ''}  onSave={txt=> set上护编号(txt||undefined)}/>
                </InputLine>
                <InputLine label={`是否手机信号覆盖:`}>
                  <CheckSwitch  checked= {手机信 || false}
                                onChange={e => set手机信(手机信? undefined:true) } />
                </InputLine>
                <InputLine label={`速比:`}>
                  <CommitInput  value={ 速比 || ''}  onSave={txt=> set速比(txt||undefined)}/>
                </InputLine>
                <InputLine label={`拖动方式:`}>
                  <Select  value={ 拖动 || ''}
                           onChange={e => set拖动( e.currentTarget.value||undefined ) } >
                    <option></option>
                    { 拖动方式.map((one,i) => <option key={i} >{one}</option> ) }
                  </Select>
                </InputLine>
                <InputLine label={`限速器出厂编号:`}>
                  <CommitInput  value={ 限速器号 || ''}  onSave={txt=> set限速器号(txt||undefined)}/>
                </InputLine>
                <InputLine label={`限速器绳直径:`}>
                  <SuffixInput type="number" value={ 限绳直径 || ''}
                      onSave={txt=> set限绳直径(txt||undefined)}
                  >mm</SuffixInput>
                </InputLine>
                <InputLine label={`曳引比:`}>
                  <CommitInput  value={ 曳引比 || ''}  onSave={txt=> set曳引比(txt||undefined)}/>
                </InputLine>
                <InputLine label={`曳引轮节径:`}>
                  <SuffixInput type="number" value={ 轮节径 || ''}
                      onSave={txt=> set轮节径(txt||undefined)}
                  >mm</SuffixInput>
                </InputLine>
                <InputLine label={`曳引绳数(钢带条数):`}>
                  <SuffixInput  value={ 绳数 || ''}
                      onSave={txt=> set绳数(txt||undefined)}
                  >根</SuffixInput>
                </InputLine>
                <InputLine label={`是否曳引绳是钢带:`}>
                  <CheckSwitch  checked= {是钢带 || false} disabled={false}
                                onChange={e => set是钢带(是钢带? undefined:true) } />
                </InputLine>
                {是钢带 ? (
                    <InputLine label={`曳引钢带的规格:`}>
                      <CommitInput  value={ 钢带规格 || ''}  onSave={txt=> set钢带规格(txt||undefined)}/>
                    </InputLine>
                ) :(
                    <InputLine label={`曳引绳直径:`}>
                      <SuffixInput type="number" value={ 绳直径 || ''} readOnly={false}
                          onSave={txt=> set绳直径(txt||undefined)}
                      >mm</SuffixInput>
                    </InputLine>
                ) }
              </LineColumn>

              <Text variant="h5">其它参数</Text>
              <LineColumn >

                <InputLine label={`爆炸物质(防爆电梯):`}>
                  <CommitInput  value={ 爆炸物质 || ''}  onSave={txt=> set爆炸物质(txt||undefined)}/>
                </InputLine>
                <InputLine label={`补偿方式:`}>
                  <Select  value={ 补偿方式 || ''}
                           onChange={e => set补偿方式( e.currentTarget.value||undefined ) } >
                    <option></option>
                    { 补偿方式s.map((one,i) => <option key={i} >{one}</option> ) }
                  </Select>
                </InputLine>
                <InputLine label={`电动机类型:`}>
                  <InputDatalist  value={ 电动机类 || ''} datalist={电动机类型s}
                                  onListChange={v => set电动机类(v ||undefined)} />
                </InputLine>
                <InputLine label={`顶升形式(液压电梯):`}>
                  <InputDatalist  value={ 顶升形式 || ''} datalist={顶升形式s}
                                  onListChange={v => set顶升形式(v ||undefined)} />
                </InputLine>
                <InputLine label={`对重导轨型式:`}>
                  <Select  value={ 导轨型式 || ''}
                           onChange={e => set导轨型式( e.currentTarget.value||undefined ) } >
                    <option></option>
                    { 对重导轨型式s.map((one,i) => <option key={i} >{one}</option> ) }
                  </Select>
                </InputLine>
                <InputLine label={`轿厢高(杂物电梯):`}>
                  <SuffixInput type="number" value={ 轿厢高 || ''}
                      onSave={txt=> set轿厢高(txt||undefined)}
                  >mm</SuffixInput>
                </InputLine>
                <InputLine label={`轿厢宽(杂物电梯):`}>
                  <SuffixInput type="number" value={ 轿厢宽 || ''}
                       onSave={txt=> set轿厢宽(txt||undefined)}
                  >mm</SuffixInput>
                </InputLine>
                <InputLine label={`轿厢深(杂物电梯):`}>
                  <SuffixInput type="number" value={ 轿厢深 || ''}
                       onSave={txt=> set轿厢深(txt||undefined)}
                  >mm</SuffixInput>
                </InputLine>
                <InputLine label={`区域防爆等级(防爆电梯):`}>
                  <ComboBoxDatalist  value={ 区域防爆 || ''}  datalist={区域防爆等级}
                               onListChange={v => set区域防爆( v||undefined ) } />
                </InputLine>
                <InputLine label={`驱动方式(杂物电梯):`}>
                  <ComboBoxDatalist  value={ 驱动方式 || ''}  datalist={驱动方式s}
                                     onListChange={v => set驱动方式( v||undefined ) } />
                </InputLine>
                <InputLine label={`上行额定速度(液压电梯):`}>
                  <SuffixInput type="number" value={ 上行额速 || ''}
                      onSave={txt=> set上行额速(txt||undefined)}
                  >m/s</SuffixInput>
                </InputLine>
                <InputLine label={`是否船舶电梯:`}>
                  <CheckSwitch  checked= {船梯 || false}
                                onChange={e => set船梯(船梯? undefined:true) } />
                </InputLine>
                <InputLine label={`是否公共交通型:`}>
                  <CheckSwitch  checked= {公共交通 || false}
                                onChange={e => set公共交通(公共交通? undefined:true) } />
                </InputLine>
                <InputLine label={`是否汽车电梯:`}>
                  <CheckSwitch  checked= {汽车电梯 || false}
                                onChange={e => set汽车电梯(汽车电梯? undefined:true) } />
                </InputLine>
                <InputLine label={`梯级宽度:`}>
                  <SuffixInput type="number" value={ 梯级宽度 || ''}
                       onSave={txt=> set梯级宽度(txt||undefined)}
                  >m</SuffixInput>
                </InputLine>
                <InputLine label={`下行额定速度(液压电梯):`}>
                  <SuffixInput type="number" value={ 下额定速 || ''}
                       onSave={txt=> set下额定速(txt||undefined)}
                  >m/s</SuffixInput>
                </InputLine>
                <InputLine label={`限速器机械动作速度(液压/杂物电梯):`}>
                  <SuffixInput  value={ 限机械速 || ''}
                        onSave={txt=> set限机械速(txt||undefined)}
                  >m/s</SuffixInput>
                </InputLine>
                <InputLine label={`悬挂钢丝绳数(液压电梯):`}>
                  <SuffixInput  value={ 悬挂绳数 || ''}
                     onSave={txt=> set悬挂绳数(txt||undefined)}
                  >根</SuffixInput>
                </InputLine>
                <InputLine label={`悬挂钢丝绳直径(液压电梯):`}>
                  <SuffixInput type="number" value={ 悬挂绳径 || ''}
                      onSave={txt=> set悬挂绳径(txt||undefined)}
                  >mm</SuffixInput>
                </InputLine>
                <InputLine label={`液压泵编号(液压电梯):`}>
                  <CommitInput  value={ 泵编号 || ''}  onSave={txt=> set泵编号(txt||undefined)}/>
                </InputLine>
                <InputLine label={`液压泵功率(液压电梯):`}>
                  <SuffixInput type="number" value={ 泵功率 || ''}
                      onSave={txt=> set泵功率(txt||undefined)}
                  >kw</SuffixInput>
                </InputLine>
                <InputLine label={`液压泵流量(液压电梯):`}>
                  <SuffixInput  value={ 泵流量 || ''}
                       onSave={txt=> set泵流量(txt||undefined)}
                  >L/M</SuffixInput>
                </InputLine>
                <InputLine label={`液压泵型号(液压电梯):`}>
                  <CommitInput  value={ 泵型号 || ''}  onSave={txt=> set泵型号(txt||undefined)}/>
                </InputLine>
                <InputLine label={`液压泵转速(液压电梯):`}>
                  <SuffixInput  value={ 泵转速 || ''}
                     onSave={txt=> set泵转速(txt||undefined)}
                  >r/min</SuffixInput>
                </InputLine>
                <InputLine label={`液压油型号(液压电梯):`}>
                  <CommitInput  value={ 液油型号 || ''}
                                onSave={txt => set液油型号(txt||undefined) }  />
                </InputLine>
                <InputLine label={`油缸数量(液压电梯):`}>
                  <SuffixInput type="number" value={ 油缸数 || ''}
                     onSave={txt=> set油缸数(txt||undefined)}
                  >个</SuffixInput>
                </InputLine>
                <InputLine label={`油缸形式(液压电梯):`}>
                  <InputDatalist  value={ 油缸形式 || ''}
                                  onListChange={v => set油缸形式(v ||undefined)}
                                  datalist={油缸形式s} />
                </InputLine>
                <InputLine label={`整机防爆标志(防爆电梯):`}>
                  <CommitInput  value={ 防爆标志 || ''}
                                onSave={txt => set防爆标志( txt||undefined) } />
                </InputLine>
                <InputLine label={`整机防爆合格证编号(防爆电梯):`}>
                  <CommitInput  value={ 防爆证号 || ''}
                                onSave={txt => set防爆证号(txt||undefined) } />
                </InputLine>
              </LineColumn>

              <Button size="lg" intent="primary"  iconAfter={<IconArrowRight />}
                      css={{ marginTop: theme.spaces.sm, whiteSpace:'unset' }}
                onPress={ async () => {
                  const eqpNew=await confirmation();
                  await mutationFunc(eqpNew);
                } }
              > 确认修改检查并保存到后端
              </Button>
            </div>
          </Container>
        </div>
      </div>

    </div>
  );
};

